<!DOCTYPE html>
<html ng-app="my">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">

   $(function(){
	   
	   $("#btn").click(function(){
		   $.ajax({
			   	
			   type:'get',
			   url:'ajax.php',
			   data:"p="+$("input").val(),
			   dataType:'text',
			   success:function(data){
				   //alert(data);
				//   var d = eval("("data")");
				  
				   $("div").empty().append(data);
			   }
		   })
	   })
	   
	   $("#btn1").click(function(){
		   
	   })
	   
   })
   
   
   angular.module("my",[])
   .controller("myc",["$http","$scope",function($http,$scope){
	         
	       $http.get("area.json").then(function(data){
	    	   
	    	   $scope.city = data.data.root;
	    	   angular.forEach($scope.city,function(v,i){
	    	//	alert(v.name+"<br/>");
	    		  
	    	   })
	    	  
	    	 
	    	   
	       },function(data){})
	       $scope.na = "";
	       $scope.naa = "";
	       $scope.inde = 0;
	      $scope.xia = function(){
	    	    angular.forEach($scope.city,function(v,i){
	    		   if(v.zipcode == $scope.na){
	    			   $scope.inde = i;
	    			  
	    			   return;
	    			   
	    		   }
	    		   
	    	   }) 
	    	   
	    	   //alert($scope.na);
	       }
	   $scope.xi = function(){
		   for(var i in $scope.city[$scope.inde]){
			   var va = $scope.city[$scope.inde];
			   
			   /* if(va == $scope.naa){
				   alert(i);
			   } */
			   alert(va);
		   }
	   }
	   
		   $scope.inpu = "qq";
		   
		   $scope.tr = [
			   
			   {'name':'zhagnsan','age':'11'},
			   {'name':'zhagnsan11','age':'121'},
			   {'name':'zhagnsan22','age':'131'},
			   {'name':'zhagnsan','age':'11'},
			   {'name':'zhagnsan11','age':'121'},
			   {'name':'zhagnsan22','age':'131'}
			   
		   ]
		   
	       $scope.show = function(){
		   $http({
			   
			   method:'get',
			   url:'ajax.php',
			   param:{"p":$scope.inpu}
			}).then(function(data){
				 $("div").empty().append(data.data);
				 $scope.apply();
			},function(data){})
	   }
	    
	       $scope.opjs = function(){
	    	  var request = new XMLHttpRequest();
	    	  var  method = "get";
	    	  var url = "ajax.php";
	    	  request.open(method,url);
	    	  request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
	    	  request.send("p='luoq111ifang'");
	    	  request.onreadystatechange = function(){
	    		  if(request.readyState == 4){
	    			 if(request.status == 200 || request.status == 304){
	    				
	    				 var nn = request.responseText;
	    				 $("div").empty().append(nn);
	    			 }
	    		  }
	    	  }
	    	  
	       }
	       
	    				
	       
   }])
</script>
</head>
<body ng-controller="myc">
<input type="text" ng-model="inpu" />
   <button id="btn">ajax</button><br/>
   <button ng-click="show()">httpangular</button>
   <button ng-click="opjs()">httpangular</button>
   
   <table border="2px solid">
     <tr>
	     <td>姓名</td>
	     <td>年龄</td>
	      <td>删除</td>
     </tr>
     
     <tr ng-repeat = "t in tr">
	     <td>{{t.name}}</td>
	     <td>{{t.age}}</td>
	     <td></td>
     </tr>
   </table>
   
   <div></div>
  
   <select ng-model="na" ng-options="x.zipcode as x.name for x in city" ng-change="xia()">
       <option value="">请选择省</option>
   </select>
   {{na}}
   <select ng-model="naa" ng-options="x.name as x.name for x in city[inde].children" ng-change="xi()">
       <option value="">请选择市</option>
   </select>
   {{inde}}
   
    <select ng-model="na" ng-options="x.name as x.name for x in city[inde].children[2].children">
       <option value="">请选择区</option>
   </select>
</body>
</html>